import React, { PureComponent } from 'react'

// 定义一个高阶组件
function enhancedUser(OriginComponent) {
  class NewComponent extends PureComponent {
    constructor() {
      super()
      this.state = {
        userInfo: {
          name: '张三',
          age: 18
        }
      }
    }
    render() {
      return (
        <div>
          {/* 将本身的props参数传递进来 */}
          <OriginComponent {...this.props} {...this.state.userInfo} />
        </div>
      )
    }
  }
  return NewComponent
}

// 使用高阶组件，给想要额外添加props的组件使用
const Home = enhancedUser(function(props) {
  return (
    <div>
      Home: {props.name} - {props.age} - {props.counter}
    </div>
  )
})

const Profile = enhancedUser(function(props) {
  return (
    <div>
      Profile: {props.name} - {props.age}
    </div>
  )
})

export class App extends PureComponent {
  render() {
    return (
      <div>
        <Home counter={3} />
        <Profile />
      </div>
    )
  }
}

export default App